import React from "react";

/* 
需求：
    http://localhost:3000
    http://localhost:3000------------->首页
    http://localhost:3000/goodsList------------->商品列表
    http://localhost:3000/newsList------------->新闻列表
    http://localhost:3000/my------------->个人中心
    http://localhost:3000/aslkdjf;lsakdjf;lsakdf------------->404,您查看的界面不存在……
    http://localhost:3000/home------------->首页(重定向)
 */
// 路由的流程：1- 确定路由模式  2- 指定路由所在的位置（路由需要放置到路由器中）
// 注意1：地址是不区分大小写（对大小写不敏感）
// 注意2：*代表的是：如果其它路由的地址不满足，那么会渲染path为*的路由
//       *可以写在Routes下的任意位置
//       如果出现两个相同的路由地址，只有第一个会渲染。
// 注意3：路由(Route)必须被Routes直接包裹。
// 注意4：Routes必须被Router所包裹，可以直接包裹也可以间接包裹。

import {
  BrowserRouter as Router, //指定路由模式为history
  Route, //路由,必须直接被Routes所包裹
  Routes, // 包裹路由
  Navigate,//重定向
  NavLink,// 可以实现导航链接

} from "react-router-dom";
import Home from "./pages/Home";
import GoodsList from "./pages/GoodsList";
import NewsList from "./pages/NewsList";
import My from "./pages/My";
import NotFound from "./pages/NotFound";
import "./App.css";

export default function App() {
  return (
    <div id={'container'}>
      <nav>
        <NavLink className={({ isActive }) => { return isActive ? "a-active":"a-link"}} to={"/"}>首页</NavLink>
        <NavLink className={(options) => {
          // console.log("商品列表",options)
          // return "a-link";
          return options.isActive ? "a-active" : "a-link"
        }} to={"/goodsList"}>商品列表</NavLink>
        <NavLink className={({isActive})=>isActive?"a-active":"a-link"} to={"/newsList"}>新闻列表</NavLink>
        <NavLink className={({isActive})=>isActive?"a-active":"a-link"} to={"/my"}>个人中心</NavLink>
      </nav>
      <Routes>
        <Route path={"/"} element={<Home />}></Route>
        <Route path={"*"} element={<NotFound />}></Route>
        <Route path={"goodsList"} element={<GoodsList />}></Route>
        <Route path={"newsList"} element={<NewsList />}></Route>
        <Route path={"my"} element={<My />}></Route>
        {/*重定向：当地址为/home,跳转至路由地址为/的路由中*/}
        <Route path={"/home"} element={<Navigate to={"/"} />}></Route>
      </Routes>
    </div>
  );
}
